<template>
  <view class="logisticsTrack_com">
    <view class="logistics_body" :style="show ? 'height: auto;' : ''">
      <u-time-line>
        <u-time-line-item v-for="item in list" :key="item.acceptTime">
          <template v-slot:content>
            <view>
              <view class="u-order-desc">{{ item.acceptStation }}</view>
              <view class="u-order-time">{{ item.acceptTime }}</view>
            </view>
          </template>
        </u-time-line-item>
      </u-time-line>
    </view>
    <view class="show_total" @click="show = !show">
      <view style="margin-right: 10rpx">{{ show ? $t('locales.packUp') : $t('locales.viewAll') }}</view>
      <u-icon :name="show ? 'arrow-up' : 'arrow-down'" color="#999"></u-icon>
    </view>
  </view>
</template>
<script>
export default {
  props: {
    value: {
      type: Object,
      default: () => {}
    }
  },
  watch: {
    value: {
			handler(val) {
				this.list = val.traces.reverse()
			},
			immediate: true
		}
  },
  data() {
    return {
      list: [],
      show: false
    }
  }
}
</script>
<style lang="scss" scoped>
.logisticsTrack_com {
  background-color: #fff;
  margin: 20rpx;
  border-radius: 12rpx;
  .logistics_body {
    padding: 20rpx 20rpx 0 20rpx;
    height: 200rpx;
    overflow: hidden;
    transition: 0.5s;
    .u-order-desc {
      color: #333;
    }
    .u-order-time {
      color: #999;
    }
  }
  .show_total {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #999;
    height: 50rpx;
    padding: 15rpx 0;
  }
}
</style>